import type { SxProps, Theme } from '@mui/material'
import { Box } from '@mui/material'
import type { SyntheticEvent } from 'react'

export interface IconParkIconElement extends HTMLElement {
  'icon-id'?:
    | '647367'
    | '684408'
    | '684409'
    | '684411'
    | '684412'
    | '684413'
    | '684414'
    | '686740'
    | '686741'
    | '686742'
    | '686743'
    | '686744'
    | '686745'
    | '686746'
    | '686747'
    | '686748'
    | '686749'
    | '686750'
    | '686751'
    | '686752'
    | '686753'
    | '686754'
    | '686993'
    | '687741'
    | '687742'
    | '691262'
    | '691537'
    | '691538'
    | '691806'
    | '695738'
    | '695739'
    | '695740'
    | '695741'
    | '695742'
    | '695743'
    | '695746'
    | '695747'
    | '695748'
    | '695750'
    | '695751'
    | '695752'
    | '695754'
    | '695755'
    | '695756'
    | '695758'
    | '695759'
    | '695760'
    | '695761'
    | '695762'
    | '695763'
    | '695764'
    | '695801'
    | '695802'
    | '695803'
    | '695804'
    | '695805'
    | '695806'
    | '695807'
    | '695810'
    | '695811'
    | '695812'
    | '695817'
    | '695818'
    | '695819'
    | '695820'
    | '695821'
    | '695822'
    | '695828'
    | '695829'
    | '695830'
    | '695831'
    | '695833'
    | '695834'
    | '695835'
    | '695836'
    | '695837'
    | '695838'
    | '695839'
    | '695840'
    | '695841'
    | '695842'
    | '695844'
    | '695845'
    | '695846'
    | '695865'
    | '695867'
    | '695868'
    | '695869'
    | '695870'
    | '695876'
    | '695877'
    | '695878'
    | '695883'
    | '695884'
    | '695886'
    | '695887'
    | '695888'
    | '695889'
    | '695890'
    | '695891'
    | '695892'
    | '695893'
    | '695896'
    | '695899'
    | '695900'
    | '695901'
    | '695902'
    | '695903'
    | '695904'
    | '695905'
    | '695906'
    | '695907'
    | '695908'
    | '695909'
    | '695913'
    | '695914'
    | '695915'
    | '695916'
    | '695933'
    | '695934'
    | '695935'
    | '695936'
    | '695938'
    | '695940'
    | '695941'
    | '695942'
    | '695944'
    | '695945'
    | '695946'
    | '695947'
    | '695948'
    | '695950'
    | '695951'
    | '695953'
    | '695954'
    | '695955'
    | '695956'
    | '695957'
    | '695958'
    | '695959'
    | '695960'
    | '695961'
    | '695962'
    | '695963'
    | '695964'
    | '695966'
    | '695967'
    | '695968'
    | '695969'
    | '695971'
    | '695972'
    | '695973'
    | '695975'
    | '695978'
    | '695979'
    | '695980'
    | '695981'
    | '695982'
    | '695984'
    | '695985'
    | '695986'
    | '695987'
    | '695988'
    | '695990'
    | '695993'
    | '695995'
    | '695997'
    | '695999'
    | '696002'
    | '696003'
    | '696004'
    | '696005'
    | '696007'
    | '696009'
    | '696010'
    | '696011'
    | '696012'
    | '696013'
    | '696014'
    | '696015'
    | '696016'
    | '696017'
    | '696018'
    | '696019'
    | '696020'
    | '696021'
    | '696022'
    | '696023'
    | '696024'
    | '696025'
    | '696027'
    | '696028'
    | '696029'
    | '696030'
    | '696031'
    | '696032'
    | '696033'
    | '696034'
    | '696035'
    | '696036'
    | '696037'
    | '696038'
    | '696039'
    | '696040'
    | '696041'
    | '696042'
    | '696043'
    | '696044'
    | '696045'
    | '696046'
    | '696048'
    | '696049'
    | '696660'
    | '696661'
    | '744163'
    | '744173'
    | '744175'
    | '750656'
    | '752737'
    | '756392'
    | '757321'
    | '757499'
    | '757504'
    | '757518'
    | '757519'
    | '757520'
    | '757521'
    | '757616'
    | '757650'
    | '767277'
    | '767278'
    | '775549'
    | '779333'
    | '779418'
    | '779705'
    | '779706'
    | '787702'
    | '788577'
    | '802334'
    | '804269'
    | '804612'
    | '804614'
    | '806103'
    | '813707'
    | '815901'
    | '820089'
    | '826687'
    | '854318'
    | '855246'
    | '855247'
    | '855248'
    | '855927'
    | '855928'
    | '855929'
    | '855938'
    | '857931'
    | '857985'
    | '861388'
    | '876705'
    | '884011'
    | '885387'
    | '897026'
    | '915485'
    | '929257'
    | '932197'
    | '949128'
    | '970590'
    | '973801'
    | '985435'
    | '1002903'
    | '1021623'
    | '1021686'
    | '1035721'
    | '1035737'
    | '1037074'
    | '1037815'
    | '1037816'
    | '1037817'
    | '1039918'
    | '1042170'
    | '1042171'
  name?:
    | 'round-fill'
    | 'apinto-pro-icon'
    | 'apinto-icon'
    | 'apinto-pro'
    | 'apinto'
    | 'check-circle'
    | 'apispace'
    | 'auto-generate-api'
    | 'compare-api'
    | 'multi-protocol'
    | 'read-good'
    | 'richdoc'
    | 'mockapi'
    | 'script-support'
    | 'diy-test'
    | 'send'
    | 'stereo-perspective'
    | 'automatic-robot'
    | 'switch-env'
    | 'flash'
    | 'chart-pie'
    | 'date-drive'
    | 'apistudio'
    | 'postcat-icon'
    | 'postcat'
    | 'apistudio-icon'
    | 'update-rotation'
    | 'page'
    | 'apispace-icon'
    | 'avatar'
    | 'people'
    | 'people-minus'
    | 'people-plus'
    | 'peoples'
    | 'user-business'
    | 'folder-close-fill'
    | 'windows'
    | 'github'
    | 'qq'
    | 'browser-chrome'
    | 'linux'
    | 'edge'
    | 'wechat'
    | 'browser'
    | 'gitlab'
    | 'apple'
    | 'alipay'
    | 'facebook'
    | 'twitter'
    | 'paypal'
    | 'new-lark'
    | 'delete'
    | 'return'
    | 'search'
    | 'import'
    | 'export'
    | 'add'
    | 'add-child'
    | 'file-addition'
    | 'add-circle'
    | 'minus'
    | 'close'
    | 'close-small'
    | 'check-small'
    | 'check'
    | 'code-terminal'
    | 'code'
    | 'preview-open'
    | 'preview-close'
    | 'folder-close'
    | 'folder-open'
    | 'upload'
    | 'download'
    | 'copy'
    | 'upload-file'
    | 'compare'
    | 'edit'
    | 'share'
    | 'share-all'
    | 'share-url-fill'
    | 'share-url'
    | 'back'
    | 'back-fill'
    | 'share-fill'
    | 'sort'
    | 'filter'
    | 'reduce'
    | 'done-all'
    | 'full-selection'
    | 'right-bar'
    | 'left-bar'
    | 'direction-adjustment'
    | 'down-small'
    | 'left-small'
    | 'right-small'
    | 'right-one'
    | 'right'
    | 'up'
    | 'up-one'
    | 'up-small'
    | 'up-two'
    | 'down-two'
    | 'enter'
    | 'down'
    | 'left'
    | 'down-one'
    | 'left-two'
    | 'right-two'
    | 'left-one'
    | 'more'
    | 'expand-left'
    | 'expand-right'
    | 'column'
    | 'center-alignment'
    | 'list-add'
    | 'sort-amount-down'
    | 'sort-amount-up'
    | 'list'
    | 'remind'
    | 'close-remind'
    | 'api'
    | 'rocket'
    | 'monitor'
    | 'robot'
    | 'plan'
    | 'application'
    | 'chart-proportion'
    | 'data'
    | 'chart-line'
    | 'pie-10'
    | 'pie'
    | 'chart-bubble'
    | 'cube'
    | 'application-menu'
    | 'crown'
    | 'crown-fill'
    | 'market'
    | 'file-word'
    | 'file-excel'
    | 'hashtag-key'
    | 'file-hash'
    | 'refresh'
    | 'order'
    | 'command'
    | 'branch'
    | 'page-template'
    | 'smart-optimization'
    | 'assembly-line'
    | 'stopwatch'
    | 'checklist'
    | 'menu-fold'
    | 'menu-unfold'
    | 'alarm'
    | 'protection'
    | 'caution'
    | 'openapi'
    | 'webhook'
    | 'holding-hands'
    | 'support'
    | 'agreement'
    | 'community'
    | 'roadmap'
    | 'family-7knl2ae1'
    | 'smiling-face'
    | 'play-fill'
    | 'play'
    | 'pause'
    | 'magic'
    | 'whole-site-accelerator'
    | 'link-cloud-faild'
    | 'link-cloud-sucess'
    | 'translate'
    | 'funds'
    | 'unhappy-face'
    | 'message'
    | 'connection-arrow'
    | 'loading'
    | 'fork'
    | 'quote'
    | 'headset'
    | 'attention'
    | 'theme'
    | 'keyboard'
    | 'briefcase'
    | 'star'
    | 'star-7knmka28'
    | 'protect'
    | 'finance'
    | 'setting'
    | 'link'
    | 'undo'
    | 'inbox-success'
    | 'home'
    | 'local'
    | 'laptop'
    | 'view-list'
    | 'lock'
    | 'unlock'
    | 'lightning'
    | 'file-text'
    | 'cooperative-handshake'
    | 'navigation'
    | 'view-grid-detail'
    | 'help'
    | 'history'
    | 'logout-7knnioon'
    | 'chinese'
    | 'calendar'
    | 'play-cycle'
    | 'world'
    | 'plugins'
    | 'link-cloud'
    | 'book'
    | 'table-report'
    | 'qiyeweixin'
    | 'Oauth'
    | 'dingding'
    | 'eolink'
    | 'tool'
    | 'category-management'
    | 'folder-code-one'
    | 'link-three-8ah7lifn'
    | 'download-two-8ah85008'
    | 'quanjusuoxiao1'
    | 'quanjufangda21'
    | 'quanjusuoxiao211'
    | 'quanjufangda1'
    | 'wenjianshezhi'
    | 'key'
    | 'zidingyijiaoben'
    | 'tiqubianliang'
    | 'mock'
    | 'tongzhishezhi'
    | 'csdn'
    | 'ceshibaogao'
    | 'biangengtongzhi'
    | 'icon-api'
    | 'youjian'
    | 'pushpin'
    | 'announcement'
    | 'collapse-text-input'
    | 'zhankai'
    | 'replay-music'
    | 'download-web'
    | 'permissions'
    | 'file-editing'
    | 'wallet'
    | 'file-focus'
    | 'pingpu-9a913n0n'
    | 'zuoyoufenping-9a913n1f'
    | 'shangxiafenping-9a913n1i'
    | 'Paypal11'
    | 'zhifubaozhifu1'
    | 'weixinzhifu11'
    | 'weixinzhifu'
    | 'update-rotation-9and40f5'
    | 'terminal'
    | 'switch'
    | 'zhinengrucan'
    | 'biaoqian-banbenleixinzeng'
    | 'book-open'
    | 'morentouxiang-2'
    | 'xiajia'
    | 'drag'
    | 'new-up'
    | 'rss'
    | 'yewuchangjing'
    | 'newlybuild'
    | 'bianji'
    | 'jiekoushouquan'
    | 'interfacefenzutubiao'
    | 'yidong'
    | 'link-one'
    | 'canshugouzaoqi'
    | 'bianliang'
    | 'tars'
    | 'if'
    | 'tars-2'
    | 'yingyongguanxi'
    | 'save-one'
    | 'save'
  size?: string
  width?: string
  height?: string
  color?: string
  stroke?: string
  fill?: string
  rtl?: string
  spin?: string
}

interface IconProps extends IconParkIconElement {
  px: number
  /** Padding left */
  pl: number
  /** Padding right */
  pr: number
  /* ml + mr */
  mx: number
  /** Margin left */
  ml: number
  /** Margin right */
  mr: number
  sx: SxProps<Theme>
  onClick?: (event: SyntheticEvent) => void
}

declare namespace JSX {
  interface IntrinsicElements {
    'iconpark-icon': Partial<IconParkIconElement>
  }
}

// @ts-ignore
export function Icon({
  name,
  size,
  fill,
  color,
  px,
  mx,
  ml,
  mr,
  pl,
  pr,
  sx,
  onClick
}: Partial<IconProps>): JSX.Element {
  // @ts-ignore
  return (
    <Box
      alignItems="center"
      display="flex"
      justifyContent="center"
      mx={mx ?? 1}
      px={px ?? 1}
      ml={ml}
      mr={mr}
      pl={pl}
      pr={pr}
      sx={sx}
      onClick={onClick}
    >
      <iconpark-icon color={color} fill={fill} name={name} size={size} />
    </Box>
  )
}
